<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单管理</title>
    <script src="asserts/plugins/jquery/jquery-3.6.0.min.js"></script>
    <script src="asserts/plugins/bootstrap/js/bootstrap.js"></script>
    <link href="asserts/plugins/bootstrap/css/bootstrap.css" rel="stylesheet">
    <script>
        $(document).ready(function () {
            fetchAllOrders();

            // 绑定搜索按钮点击事件
            $('#search').on('click', function () {
                var userName = $('input[name="userName"]').val();
                var orderState = $('input[name="orderState"]').val();

                if (userName || orderState) {
                    searchOrders(userName, orderState);
                } else {
                    fetchAllOrders();
                }
            });

            // 绑定更新按钮点击事件使用事件委托
            $(document).on('click', '.update-button', function () {
                var orderId = $(this).closest('tr').find('td:eq(1)').text(); // 获取订单ID
                $('#orderIdToUpdate').val(orderId); // 将订单ID设置到隐藏域中
            });

            // 绑定确认更新按钮点击事件
            $('#updateOrder').on('click', function () {
                var orderId = $('#orderIdToUpdate').val(); // 获取订单ID
                var orderState = $('#orderState').val(); // 获取订单状态

                // 将中文状态转换为对应的状态值
                switch (orderState) {
                    case "未付款":
                        orderState = 0;
                        break;
                    case "已付款未发货":
                        orderState = 1;
                        break;
                    case "发货待收货":
                        orderState = 2;
                        break;
                    case "收货待评价":
                        orderState = 3;
                        break;
                    case "订单完成":
                        orderState = 4;
                        break;
                    case "退货状态":
                        orderState = 5;
                        break;
                    default:
                        orderState = -1; // 未知状态
                }

                $.ajax({
                    url: '/admin/OrderController',
                    data: {
                        type: 'updateOrderStatus',
                        orderId: orderId,
                        orderState: orderState
                    },
                    method: 'POST',
                    dataType: 'json',
                    success: function (respResult) {
                        if (respResult.status === 200) {
                            alert("订单状态更新成功");
                            fetchAllOrders();
                            $('#updateModal').modal('hide');
                        } else {
                            alert("订单状态更新失败");
                        }
                    }
                });
            });


            // 获取所有订单
            function fetchAllOrders() {
                $.ajax({
                    url: '/admin/OrderController',
                    data: {
                        type: 'getAllOrders'
                    },
                    method: 'GET',
                    dataType: 'json',
                    success: function (respResult) {
                        if (respResult.status === 500) {
                            alert("页面加载失败");
                        } else {
                            renderOrders(respResult.data);
                        }
                    }
                });
            }

            // 搜索订单
            function searchOrders(userName, orderState) {
                var dataObj = {
                    type: 'searchOrders'
                };

                if (userName) {
                    dataObj.userName = userName;
                }

                if (orderState) {
                    dataObj.orderState = orderState;
                }

                $.ajax({
                    url: '/admin/OrderController',
                    data: dataObj,
                    method: 'GET',
                    dataType: 'json',
                    success: function (respResult) {
                        if (respResult.status === 500) {
                            alert("搜索失败");
                        } else {
                            renderOrders(respResult.data);
                        }
                    }
                });
            }



            // 渲染订单表格
            function renderOrders(data) {
                let tr = '';
                for (let i = 0; i < data.length; i++) {
                    tr += "<tr><td>" + data[i].uId + "</td>" +
                        "<td>" + data[i].oId + "</td>" +
                        "<td>" + data[i].oCount + "</td>" +
                        "<td>" + getOrderStatus(data[i].oState) + "</td>" +
                        "<td>" + formatDate(data[i].oTime) + "</td>" +
                        "<td>" + data[i].uName + "</td>" +
                        "<td><button type='button' class='btn btn-success update-button' data-toggle='modal' data-target='#updateModal'>更新状态</button></td>" +
                        "</tr>";
                }
                $('#order-table tbody').html(tr);
            }

            // 格式化时间戳为日期时间字符串
            function formatDate(timestamp) {
                var date = new Date(timestamp);
                return date.toLocaleString(); // 可根据需要调整日期时间格式
            }

            // 获取订单状态文字
            function getOrderStatus(status) {
                switch (status) {
                    case 0:
                        return "未付款";
                    case 1:
                        return "已付款未发货";
                    case 2:
                        return "发货待收货";
                    case 3:
                        return "收货待评价";
                    case 4:
                        return "订单完成";
                    case 5:
                        return "退货状态";
                    default:
                        return "未知状态";
                }
            }
        });
    </script>
</head>
<body>
<div class="container">
    <div class="row mb-3">
        <div class="col-md-4">
            <input type="text" class="form-control search-input" placeholder="请输入用户名" name="userName">
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control search-input" placeholder="请输入订单状态" name="orderState">
        </div>
        <div class="col-md-4 search-buttons">
            <button type="button" class="btn btn-primary search-button" id="search">
                <span class="glyphicon glyphicon-search"> 搜索</span>
            </button>
        </div>
    </div>
    <div class="row">
        <table class="table table-bordered table-hover" id="order-table">
            <thead>
            <tr id="tr">
                <th>用户ID</th>
                <th>订单ID</th>
                <th>订单总金额</th>
                <th>订单状态</th>
                <th>下单时间</th>
                <th>用户名</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>

<!-- 更新订单状态模态框 -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="updateModalLabel">更新订单状态</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="orderIdToUpdate">
                <div class="form-group">
                    <label for="orderState">订单状态</label>
                    <select class="form-control" id="orderState">
                        <option value="0">未付款</option>
                        <option value="1">已付款未发货</option>
                        <option value="2">发货待收货</option>
                        <option value="3">收货待评价</option>
                        <option value="4">订单完成</option>
                        <option value="5">退货状态</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="updateOrder">确认更新</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>

